<template>
  <div class="Index_shou">
    <div class="Top">
      <div v-for="(item, index) in UserData" :key="index" class="Top_right">
        <img :src="item.img" alt="" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="Index_Main">
      <div class="Main_Top">
        <div class="left"></div>
        <h4>首页</h4>
        <p>数据总览</p>
      </div>
      <div class="Main_Content">
        <div class="Content_Item">
          <div class="Content_left" style="background-color: #629cf4">
            <Edit style="width: 30px; margin: 30px; color: #fff" />
          </div>
          <span style="font-size: 30px">500</span>
          <span style="font-size: 10px; color: #b1bcbf">今日预约人数</span>
        </div>
        <div class="Content_Item">
          <div class="Content_left" style="background-color: #ec808d">
            <Edit style="width: 30px; margin: 30px; color: #fff" />
          </div>
          <span style="font-size: 30px">500</span>
          <span style="font-size: 10px; color: #b1bcbf">今日预约人数</span>
        </div>
        <div class="Content_Item">
          <div class="Content_left" style="background-color: #caf982">
            <Edit style="width: 30px; margin: 30px; color: #fff" />
          </div>
          <span style="font-size: 30px">500</span>
          <span style="font-size: 10px; color: #b1bcbf">今日预约人数</span>
        </div>
        <div class="Content_Item">
          <div class="Content_left" style="background-color: #facd91">
            <Edit style="width: 30px; margin: 30px; color: #fff" />
          </div>
          <span style="font-size: 30px">500</span>
          <span style="font-size: 10px; color: #b1bcbf">今日预约人数</span>
        </div>
        <div class="Content_Item">
          <div class="Content_left" style="background-color: #c280ff">
            <Edit style="width: 30px; margin: 30px; color: #fff" />
          </div>
          <span style="font-size: 30px">500</span>
          <span style="font-size: 10px; color: #b1bcbf">今日预约人数</span>
        </div>
        <div class="Echart"></div>
      </div>
      <div class="ECharts">
        <div class="ECharts_Item">
          <div id="option1"></div>
        </div>
        <div class="ECharts_Item">
          <div id="option2"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { Edit } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import axios from "axios";

const UserData = ref([]);
const getUserData = async () => {
  const { data } = await axios.get("/data.json");
  UserData.value = data;
  console.log(UserData);
};


onMounted(() => {
  getUserData();
  //柱形图
  const option1 = echarts.init(document.getElementById("option1"));
  const option = {
    backgroundColor: "#FFFF",
    tooltip: {},
    grid: {
      top: "8%",
      left: "1%",
      right: "1%",
      bottom: "8%",
      containLabel: true,
    },
    legend: {
      itemGap: 50,
      data: ["挂号人数", "最新挂号人数"],
      textStyle: {
        color: "#1F1F1F",
        borderColor: "#fff",
      },
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: true,
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: "#f9f9f9",
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "#d1e6eb",
            margin: 15,
          },
        },
        axisTick: {
          show: false,
        },
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
      },
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        // max: 140,
        splitNumber: 7,
        splitLine: {
          show: true,
          lineStyle: {
            color: "#D5D5D5",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          margin: 20,
          textStyle: {
            color: "#1F1F1F",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "挂号人数",
        type: "line",
        // smooth: true, //是否平滑曲线显示
        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbol: "emptyCircle",
        symbolSize: 6,
        lineStyle: {
          normal: {
            color: "#15E8FD", // 线条颜色
          },
          borderColor: "#1F1F1F",
        },
        label: {
          show: true,
          position: "top",
          //字体颜色
          textStyle: {
            color: "#1F1F1F",
          },
        },
        itemStyle: {
          //线性圆
          normal: {
            color: "#15E8FD",
          },
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          //区域填充样式
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              0,
              [
                {
                  offset: 0,
                  color: "rgba(0,154,120,1)",
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0, 0)",
                },
              ],
              false
            ),
            shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
            shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          },
        },
        data: [393, 438, 485, 631, 689, 824, 987],
      },
      {
        name: "最新挂号人数",
        type: "bar",
        barWidth: 20,
        tooltip: {
          show: false,
        },
        label: {
          show: true,
          position: "top",
          textStyle: {
            color: "#fff",
          },
        },
        itemStyle: {
          normal: {
            // barBorderRadius: 5,
            // color: new echarts.graphic.LinearGradient(
            //     0, 0, 0, 1,
            //     [{
            //             offset: 0,
            //             color: '#14c8d4'
            //         },
            //         {
            //             offset: 1,
            //             color: '#43eec6'
            //         }
            //     ]
            // )
            color: function (params) {
              var colorList = [
                "#0ec1ff",
                "#10cdff",
                "#12daff",
                "#15ebff",
                "#17f8ff",
                "#1cfffb",
                "#1dfff1",
              ];
              return colorList[params.dataIndex];
            },
          },
        },
        data: [200, 382, 102, 267, 186, 315, 316],
      },
    ],
  };

  option1.setOption(option);
  // 线性图
  const option2 = echarts.init(document.getElementById("option2"));
  const option3 = {
    tooltip: {
      trigger: "axis",
    },
    xAxis: [
      {
        type: "category",
        data: [
          "2023-01",
          "2023-02",
          "2023-03",
          "2023-04",
          "2023-05",
          "2023-06",
        ],
        axisLine: {
          lineStyle: {
            color: "#999",
          },
        },
        axisLabel: {
          interval: 4,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitNumber: 4,
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: "#DDD",
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#333",
          },
        },
        nameTextStyle: {
          color: "#999",
        },
        splitArea: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "价格",
        type: "line",
        data: [23, 60, 20, 36, 23, 85],
        lineStyle: {
          normal: {
            width: 8,
            color: {
              type: "linear",

              colorStops: [
                {
                  offset: 0,
                  color: "#A9F387", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#48D8BF", // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
            shadowColor: "rgba(72,216,191, 0.3)",
            shadowBlur: 10,
            shadowOffsetY: 20,
          },
        },
        itemStyle: {
          normal: {
            color: "#fff",
            borderWidth: 10,
            /*shadowColor: 'rgba(72,216,191, 0.3)',
                shadowBlur: 100,*/
            borderColor: "#A9F387",
          },
        },
        smooth: true,
      },
    ],
  };
  option2.setOption(option3);
});

</script>

<style scoped lang="scss">
.Top {
  width: 100%;
  height: 8vh;

  .Top_right {
    width: 140px;
    height: 50px;
    float: right;
    margin-top: 10px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 10px;
    }
  }
}
.Index_Main {
  width: 100%;
  height: 92vh;
  background-color: #eaf0f7;
  .Main_Top {
    .left {
      width: 30px;
      height: 10px;
      background-color: #006eff;
      border-radius: 30px;
      display: inline-block;
      margin-left: 30px;
      margin-top: 30px;
    }
    h4 {
      display: inline-block;
      margin-left: 10px;
    }
    p {
      margin-left: 30px;
      margin-top: 30px;
      font-weight: 600;
    }
  }
  .Main_Content {
    width: 95%;
    height: 120px;
    margin: auto;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    .Content_Item {
      display: inline-block;
      width: 18%;
      height: 120px;
      margin-left: 20px;
      border-radius: 10px;
      background-color: rgb(255, 255, 255);
      .Content_left {
        display: inline-block;
        width: 90px;
        height: 90px;
        border-radius: 10px;

        margin: 15px;
        margin-left: 20px;
        float: left;
      }
      span {
        float: left;
        margin-top: 10px;
        margin-bottom: 30px;
      }
    }
  }
  .ECharts {
    width: 95%;
    height: 330px;
    margin: auto;
    display: flex;
    justify-content: center;
    .ECharts_Item {
      display: inline-block;
      width: 48%;
      height: 400px;
      border-radius: 10px;
      background-color: white;
      margin-left: 10px;
      
    }
    #option1 {
      width: 90%;
      height: 100%;
      margin: auto;
      justify-content: center;
      
    }
    #option2 {
      width: 90%;
      height: 100%;
      margin: auto;
    }
  }
}
</style>
